import React from 'react';
import { connect } from 'dva/index';
import { Button, Form, Input, Modal, Row, Col } from 'antd';
import PortSelect from '../../common/portSelect';
import Constants from '../../../utils/Constants';

const R = require('ramda');
const FormItem = Form.Item;

const airlineDetail = Form.create()(class AirlineDetail extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			open: false,
			disabled: false
		}
	}

	handleOpen = (disabled) => {
		this.setState({ open: true, disabled });
	}

	handleCancel = (id) => {
		this.setState({ open: false });
		this.props.form.resetFields();
	}

	handleSave = (id) => {
		this.props.form.validateFields({ force: true }, (errors, values) => {
			if (errors) return;
			values.id = this.props.airline.dataSource && this.props.airline.dataSource.id ? this.props.airline.dataSource.id : null;
			// let deList =[];
			// let loList = [];
			// values.deList=values.destinationPort,[values.destinationPort],undefined
			// values.loList=values.loadingPort,[values.loadingPort],undefined
			//
			// // if(!R.equals(this.deList && this.loList)){
			// 	if(R.equals(R.isNil(deList),!R.isNil(loList))){
			//     message.error("AAAAA");
			//     return
			// }
			if (!R.equals(R.pick(Object.keys(values), this.props.airline.dataSource), values)) {
				this.props.dispatch({
					type: values.id ? 'airline/updateAirline' : 'airline/addAirline',
					payload: {
						...values,
						onSuccess: () => {
							this.handleCancel();
							if (this.props.refreshList) this.props.refreshList();
						}
					}
				})
			} else this.handleCancel();
		})
	}

	render() {
		let dataSource = this.props.airline.dataSource ? this.props.airline.dataSource : {};
		let formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 12 } };
		let formItemLayout2 = { labelCol: { span: 3 }, wrapperCol: { span: 20 } };
		const { getFieldDecorator } = this.props.form;
		let footer = [
			<Button key="save" size="large" loading={this.props.loading} onClick={this.handleSave.bind(this)} style={{ display: this.state.disabled ? 'none' : 'inline-block' }}>保存</Button>,
			<Button key="cancel" size="large" loading={this.props.loading} onClick={this.handleCancel.bind(this, true)}>{this.state.disabled ? "关闭" : "取消"}</Button>
		];
		return (
			<Modal maskClosable={false} visible={this.state.open} width={'60%'} title={'航线详情'} onCancel={this.handleCancel.bind(this)} footer={footer} confirmLoading={this.props.loading}>
				<Form>
					<Row>
						<Col span={8}>
							<FormItem {...formItemLayout} label="航线代码" hasFeedback>
								{getFieldDecorator('airlineCode', {
									rules: [{
										required: true, message: '请输入航线代码',
									}],
									initialValue: dataSource.airlineCode
								})(
									<Input maxLength="10" disabled={this.state.disabled} />
									)}
							</FormItem>
						</Col>
						<Col span={8}>
							<FormItem {...formItemLayout} label="航线中文名称" hasFeedback>
								{getFieldDecorator('airlineName', {
									rules: [{
										required: true, message: '请输入航线中文名称',
									}],
									initialValue: dataSource.airlineName
								})(
									<Input maxLength="20" disabled={this.state.disabled} />
									)}
							</FormItem>
						</Col>
						<Col span={8}>
							<FormItem {...formItemLayout} label="航线英文名称" hasFeedback>
								{getFieldDecorator('airlineNameEn', {
									rules: [{
										required: true, message: '请输入航线英文名称',
									}],
									initialValue: dataSource.airlineNameEn
								})(
									<Input maxLength="20" disabled={this.state.disabled} />
									)}
							</FormItem>
						</Col>
					</Row>
					<Row>
						<Col span={21}>
							<FormItem {...formItemLayout2} label="起运港" hasFeedback>
								{getFieldDecorator('loadingPort', {
									rules: [{
										required: true, message: '请选择起运港',
									}],
									initialValue: R.isEmpty(dataSource.loadingPort) ? [] : dataSource.loadingPort
								})(
									<PortSelect mode="tags" disabled={this.state.disabled} style={{ width: '100%' }} portType={"1"}/>
									)}
							</FormItem>
						</Col>
					</Row>
					<Row>
						<Col span={21}>
							<FormItem {...formItemLayout2} label="目的港" hasFeedback>
								{getFieldDecorator('destinationPort', {
									rules: [{
										required: true, message: '请选择目的港',
									}],
									initialValue: R.isEmpty(dataSource.destinationPort) ? [] : dataSource.destinationPort
								})(
									<PortSelect mode="tags" disabled={this.state.disabled} style={{ width: '100%' }} portType={"1"}/>
									)}
							</FormItem>
						</Col>
					</Row>
				</Form>
			</Modal>
		)
	}
})

function mapStateToProps(state) {
	return {
		loading: state.loading.models.airline, airline: state.airline
	};
}

export default connect(mapStateToProps)(airlineDetail);